<!-- 部门树 -->
<template>
    <el-card shadow="never">
        <el-input v-model="deptName" placeholder="部门名称" clearable>
            <template #prefix>
                <i-ep-search />
            </template>
        </el-input>

        <el-tree
            ref="deptTreeRef"
            class="mt-2"
            :data="deptList"
            :props="{ children: 'children', label: 'label', disabled: '' }"
            :expand-on-click-node="false"
            :filter-node-method="handleFilter"
            default-expand-all
            @node-click="handleNodeClick"
        />
    </el-card>
</template>

<script setup lang="ts">
import DeptAPI from '@/api/dept'
const props = defineProps({
    modelValue: {
        type: [Number],
        default: undefined,
    },
})
// 钩子
const emits = defineEmits(['node-click'])
const deptId = useVModel(props, 'modelValue', emits)
// state
const deptList = ref<OptionType[]>() // 部门列表
const deptName = ref() // 部门名称
const deptTreeRef = ref(ElTree) // 部门树

// action
/** 部门树节点 Click */
function handleNodeClick(data: { [key: string]: any }) {
    deptId.value = data.value
    emits('node-click')
}
/** 部门筛选 */
function handleFilter(value: string, data: any) {
    if (!value) {
        return true
    }
    return data.label.indexOf(value) !== -1
}
// 生命周期
onBeforeMount(() => {
    DeptAPI.getOptions().then((data) => {
        deptList.value = data
    })
})
watchEffect(
    () => {
        deptTreeRef.value.filter(deptName.value)
    },
    {
        flush: 'post', // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
    }
)
</script>

<style scoped></style>
